<div id="pageLoader" class='overlay'>
    <div class='spinner center'>
        <div class='spinner-blade'></div>
        <div class='spinner-blade'></div>
        <div class='spinner-blade'></div>
        <div class='spinner-blade'></div>
        <div class='spinner-blade'></div>
        <div class='spinner-blade'></div>
        <div class='spinner-blade'></div>
        <div class='spinner-blade'></div>
        <div class='spinner-blade'></div>
        <div class='spinner-blade'></div>
        <div class='spinner-blade'></div>
        <div class='spinner-blade'></div>
    </div>
</div>
<style>
.overlay {
  /*background-image: url("/images/jewel/loder_preview.jpg");*/
  background-repeat: no-repeat;
  background-size: 100%;
  /*background-color: #474747;*/
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #FFF;
  background-position: center;
  z-index: 980;
}

.spinner {
  font-size: 50px;
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
}
.spinner.center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.spinner .spinner-title{
  font-size: 12px;
  position: absolute;
  bottom: -25px;
  text-align: center;
  text-transform: uppercase;
  color: #C0C0C0;
  text-shadow: -1px -1px 1px #676767;
  font-weight: bold;
}
.spinner .spinner-blade {
  position: absolute;
  left: 0.4629em;
  bottom: 0;
  width: 0.074em;
  height: 0.2777em;
  border-radius: 0.5em;
  background-color: transparent;
  -webkit-transform-origin: center -0.2222em;
      -ms-transform-origin: center -0.2222em;
          transform-origin: center -0.2222em;
  -webkit-animation: spinner-fade 1s infinite linear;
          animation: spinner-fade 1s infinite linear;
}
<% for i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] %>
.spinner .spinner-blade:nth-child(<$ i+1 $>) {
  -webkit-animation-delay: <$ i*0.083 $>s;
          animation-delay: <$ i*0.083 $>s;
  -webkit-transform: rotate(<$ i*30 $>deg);
      -ms-transform: rotate(<$ i*30 $>deg);
          transform: rotate(<$ i*30 $>deg);
}
<% endfor %>

@-webkit-keyframes spinner-fade {
  0% {
    background-color: #69717d;
  }
  100% {
    background-color: transparent;
  }
}

@keyframes spinner-fade {
  0% {
    background-color: #69717d;
  }
  100% {
    background-color: transparent;
  }
}
</style>